<template>
  <view class="lonetrail-container">
    <view class="bg-layer">
      <view class="metallic-gradient"></view>
      <view class="bg-overlay"></view>
    </view>

    <view class="orbit-system">
      <view class="orbit-ring ring-1"></view>
      <view class="orbit-ring ring-2"></view>
    </view>

    <view class="top-hud">
      <text class="hud-text">C.W. SYSTEM // ONLINE</text>
      <text class="hud-text">DATA LOGGING...</text>
    </view>

    <view class="main-panel">
      <view class="panel-inner-border"></view>
      <view class="panel-header">
        <text class="panel-title">INTERVIEW_MODULE</text>
        <text class="panel-index">NO.{{ index < 10 ? '0'+index : index }}</text>
      </view>

      <view class="question-box">
        <view class="content-text">
          {{ content }}
        </view>
        <view class="prompt-box" v-if="questionPrompt">
          <text class="prompt-icon">i</text>
          <text class="prompt-text">{{ questionPrompt }}</text>
        </view>
      </view>
    </view>

    <view class="control-deck">
      <button 
        class="lonetrail-button" 
        hover-class="lonetrail-button-hover"
        @click="hanldeBeginInterview"
      >
        <view class="btn-text-wrapper">
          <text class="btn-text">{{ btnText }}</text>
          <view class="btn-color-strip"></view>
        </view>
      </button>
      <text class="copyright">RHODES ISLAND // DEPARTMENT OF SCIENCE</text>
    </view>
  </view>
</template>

<script>
// 此处的 Script 代码与您提供的功能代码完全一致，仅做样式修改
import { getQuestions } from '@/api/answer/answer.js'

export default {
  data() {
    return {
      questions: [],
      index: 0,
      content: '等待数据同步...\n请点击下方按钮初始化',
      questionPrompt: '',
      btnText: 'INITIATE', 
      recordManager: null,
      recordFilePath: null
    };
  },
  methods: {
    async loadQuestions() {
      let recordId = uni.getStorageSync("interviewRecord");
      try {
          const res = await getQuestions(recordId)
          if(res.data) this.questions = res.data
      } catch(e) {
          console.error(e)
      }
    },
    hanldeBeginInterview() {
      if (this.index == 0) {
        this.btnText = 'NEXT PHASE' 
        this.showQuestion(this.index);
        this.recordManager.start({
          format: 'mp3',
          duration: 300000
        })
        this.index++;
      } else {
        this.recordManager.stop()
      }
    },
    showQuestion(index) {
      if (index < this.questions.length) {
        this.content = this.questions[index].content;
        this.questionPrompt = this.questions[index].questionPrompt;
      }
    },
    uploadRecord() {
      if(!this.recordFilePath || !this.recordFilePath.file) return;
      
      uni.uploadFile({
        url: 'http://localhost:8080/interview/answer/handelAnswer',
        filePath: this.recordFilePath.file,
        name: 'files',
        formData: {
          questionId: this.recordFilePath.questionId,
        },
        success: (res) => {
          console.log('resAnswer:', res)
        }
      })
    }
  }, 
  
  onLoad() {
	  // 步骤一：使用 uni.getStorageSync() 获取存储的值
	  const recordId = uni.getStorageSync('interviewRecord');
	  
	  // 步骤二：使用 console.log() 将值打印到控制台
	  console.log('当前存储的面试记录ID (recordId) 是:', recordId);
    this.loadQuestions()
    this.recordManager = uni.getRecorderManager();
    this.recordManager.onStop((res) => {
      let qId = ''
      if(this.questions[this.index - 1]){
          qId = this.questions[this.index - 1].id
      }
      this.recordFilePath = {
        file: res.tempFilePath,
        questionId: qId 
      }
      this.uploadRecord()
      
      if (this.index > 0 && this.index < this.questions.length) {
        this.btnText = 'NEXT PHASE'
      } else {
        this.btnText = 'TERMINATE'
      }
      
      if(this.index < this.questions.length){
         this.showQuestion(this.index++); 
      } else {
          this.index++; 
      }
      
      if (this.index > this.questions.length) {
        uni.navigateTo({
          url: '/pages/report/report'
        })
      } else {
        this.recordManager.start({
          format: 'mp3',
          duration: 300000,
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
/* 孤星主视觉图颜色参考 */
$lt-bg-dark: #32353A; // 深色背景
$lt-bg-light: #5A5D61; // 亮一些的背景灰
$lt-text-primary: #ECECEC; // 主要文本白
$lt-text-secondary: #909399; // 次要文本灰
$lt-strip-red: #A3484C; // LONETRAIL 红
$lt-strip-yellow: #C1853F; // LONETRAIL 黄
$lt-strip-cyan: #4A9C8D; // LONETRAIL 青
$lt-border: rgba(236, 236, 236, 0.1); // 面板边框

.lonetrail-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: $lt-bg-dark; // 深灰色背景
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  color: $lt-text-primary;
}

/* 背景层 - 模拟图中深邃的金属通道感 */
.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  
  .metallic-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // 模拟从中心向外扩散的金属反射光，更接近图中亮灰到深灰的过渡
    background: radial-gradient(circle at 50% 50%, $lt-bg-light 0%, $lt-bg-dark 80%);
  }

  .bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/static/bj.png') no-repeat center center; /* 确保使用你的背景图 */
    background-size: cover;
    opacity: 0.15; /* 降低背景图的透明度，使其更像是一种纹理或远景 */
    filter: grayscale(80%) brightness(0.7); /* 转换为灰度并调暗 */
  }
}

/* 轨道动画系统 - 调整颜色和透明度 */
.orbit-system {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600rpx;
  height: 600rpx;
  z-index: 1; // 确保在背景之上但在主要内容之下
  pointer-events: none;
}
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08); // 更浅的白线
  opacity: 0.2; // 降低透明度，更像背景装饰
}
.ring-1 {
  width: 140%;
  height: 140%;
  border-left: 1px solid $lt-strip-cyan; // 轨道条颜色
  animation: rotate 20s linear infinite;
}
.ring-2 {
  width: 100%;
  height: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.15); // 轨道条颜色
  animation: rotate 15s linear infinite reverse;
}

/* 顶部 HUD */
.top-hud {
  position: fixed;
  top: 60rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 40rpx;
  box-sizing: border-box;
  z-index: 10;
  
  .hud-text {
    font-size: 20rpx;
    letter-spacing: 2px;
    color: $lt-text-secondary; // 次要文本灰
    font-weight: bold;
  }
}

/* 主面板 - 更扁平、不透明的浅灰色面板 */
.main-panel {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  min-height: 500rpx;
  max-height: 55vh; /* 限制高度防止内容过多 */
  
  background: rgba(80, 80, 80, 0.9); // 较不透明的深灰
  // backdrop-filter: blur(5px); // 减弱模糊效果，更实体化
  // -webkit-backdrop-filter: blur(5px);
  
  border: 1px solid $lt-border; // 细白边
  box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.3); // 更重的阴影
  z-index: 10;
  padding: 40rpx;
  box-sizing: border-box;
  overflow-y: auto; /* 内容溢出时可滚动 */
  
  .panel-inner-border {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    right: 10rpx;
    bottom: 10rpx;
    border: 1px dashed rgba(255,255,255,0.05); /* 内部虚线框 */
    pointer-events: none;
  }
  
  // 角标装饰被内部虚线框替代，若需要，可取消注释
  // .corner { display: none; }
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid $lt-border; // 细白边
  padding-bottom: 20rpx;
  margin-bottom: 40rpx;
  
  .panel-title {
    font-size: 28rpx; // 略大
    color: $lt-text-primary; // 主要文本白
    letter-spacing: 3px; // 更宽的字间距
    font-weight: bold;
  }
  .panel-index {
    font-size: 48rpx;
    font-weight: 200; // 极细字体
    color: rgba(255,255,255,0.15); // 更不明显的索引
    font-family: sans-serif;
  }
}

.question-box {
  .content-text {
    font-size: 34rpx;
    line-height: 1.6;
    color: $lt-text-primary; // 纯白色内容
    font-weight: 400; // 适中粗细
    margin-bottom: 40rpx;
    text-shadow: none;
  }
}

.prompt-box {
  display: flex;
  align-items: flex-start;
  margin-top: 30rpx;
  background: rgba(0, 0, 0, 0.3); // 深色背景，更沉稳
  padding: 20rpx;
  border-left: 2px solid $lt-strip-cyan; // 提示条用青色
  
  .prompt-icon {
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    border-radius: 50%;
    background: $lt-strip-cyan;
    color: #000;
    font-size: 20rpx;
    font-weight: bold;
    margin-right: 15rpx;
    margin-top: 6rpx;
  }
  .prompt-text {
    font-size: 26rpx;
    color: $lt-text-secondary; // 提示文本用次要灰
  }
}

/* 底部控制区 - 确保按钮在底部 */
.control-deck {
  position: fixed;
  bottom: 100rpx; // 留出底部边距
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
  
  // 底部装饰线可以移除或简化
  .line-deco {
    display: none; // 暂时移除，让按钮更突出
  }
}

/* 自定义孤星按钮 - 模仿 LONETRAIL Logo 下方的三色条 */
.lonetrail-button {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  width: 80%; // 保持宽度
  max-width: 600rpx; // 限制最大宽度
  height: 110rpx; // 稍微高一点，给三色条留空间
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 文字向上对齐，下方留给色条 */
  position: relative;
  
  &::after { border: none; }
}

.btn-text-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $lt-text-primary; // 按钮主体为白色
  display: flex;
  align-items: center;
  justify-content: center;
  color: $lt-bg-dark; // 文字颜色为深灰
  font-weight: 900; // 加粗字体
  font-size: 32rpx;
  letter-spacing: 4px;
  transition: all 0.2s ease-out;
  
  // 按钮切角，与 LONETRAIL Logo 风格更匹配
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 15px), 
    calc(100% - 15px) 100%, 
    0 100%, 
    0 15px
  );
}

/* 核心视觉：三色条装饰，位于按钮文字下方 */
.btn-color-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15rpx; // 颜色条高度
  background: linear-gradient(to right, 
    $lt-strip-red 0%, 
    $lt-strip-red 33%, 
    $lt-strip-yellow 33%, 
    $lt-strip-yellow 66%, 
    $lt-strip-cyan 66%, 
    $lt-strip-cyan 100%
  );
  z-index: 2; // 确保在按钮主体之上
}

.lonetrail-button-hover .btn-text-wrapper {
  background: $lt-bg-light; // 悬停时稍微变暗
  color: $lt-text-primary; // 文字变亮
  transform: translateY(-5rpx); // 模拟按下的轻微浮起感
  box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.4);
}

.copyright {
  margin-top: 40rpx;
  font-size: 16rpx;
  color: rgba(236,236,236,0.3);
  letter-spacing: 2px;
}

/* 动画保留，确保轨道旋转 */
@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>